<template>
  <div style="height: 100%; width: 100%">
    <div class="table-component-page">
      <!-- 操作栏 -->
      <div class="header-box">
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item prop="subjectName" label="专题名称">
            <el-input v-model="searchForm.subjectName" placeholder="请输入专题名称" />
          </el-form-item>
          <el-form-item prop="status" label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择专题状态" clearable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button  type="primary" icon="el-icon-search" @click="submitForm">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="formCancel">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <div class="table-box">
          <el-table
            stripe
            :data="bannerData"
            :height="'100%'"
            border
            :header-cell-style="{textAlign:'center'}"
          >
            <el-table-column prop="subjectName" label="专题名称" align="center" />
            <el-table-column prop="subjectLink" label="专题链接" align="center" />
            <el-table-column prop="buttonDescribe" label="专题描述" align="center" />
            <el-table-column prop="url" label="图片地址" align="center">
              <template slot-scope="scope">
                <a :href="baseUrl+scope.row.url" target="_blank">{{ baseUrl+scope.row.url }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="isDisplay" label="是否展示" align="center" >
              <template slot-scope="scope">
                <el-switch
                  v-permisson="'bannerAudit:isShow'"
                  v-model="scope.row.isDisplay!==0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否"
                  @change="publishBanner(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                <el-tag :type="statusTagMap[scope.row.status]">
                  {{ statusList.find(i => i.value === scope.row.status)['label'] }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="auto">
              <template slot-scope="scope">
                <el-button
                  v-permission="'bannerAudit:preview'"
                  type="primary"
                  size="mini"
                  @click="detailBanner(scope.row.id)"
                >详情</el-button>
                <el-dropdown v-if="scope.row.status === 0" style="margin-left: 10px">
                  <el-button
                    v-permission="'bannerAudit:audit'"
                    type="warning"
                    size="mini"
                  >审核</el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="auditBanner(2, scope.row)">通过</el-dropdown-item>
                    <el-dropdown-item @click.native="auditBanner(1, scope.row)">驳回</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <template v-if="[1].includes(scope.row.status)">
                  <el-button
                    v-permission="'bannerAudit:edit'"
                    type="success"
                    size="mini"
                    @click="editBanner(scope.row)"
                  >编辑</el-button>
                  <el-button
                    v-permission="'bannerAudit:delete'"
                    type="danger"
                    size="mini"
                    @click="deleteBanner(scope.row)"
                  >删除</el-button>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
            title="专题详情"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose">
            <div style="text-align: center">
              <a :href="'http://'+ImageUrl" target="_blank">
                <el-image
                  :src="Img && baseUrl + Img.url"
                  style="height: 50%;width: 50%;margin:0 auto"
                  fit="fill"
                >
                </el-image>
              </a>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
            </span>
          </el-dialog>
        </div>
        <div class="table-pagination">
          <!-- 分页 -->
          <el-pagination
            :current-page="pagination.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { bannerDatail, bannerDelete, bannerAudit, isBannerShow, bannerListPaging } from '@/api/banner';
import { BANNER_STATUS_LIST } from '@/constant';
import store from '@/store';

export default {
  name: 'BannerAudit',
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      baseUrl: '',
      statusList: BANNER_STATUS_LIST,
      // 列表数据
      bannerData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      // 搜索
      searchForm: {},
      statusTagMap: {
        0: 'primary',
        1: 'danger',
        2: 'success'
      },
      ImageUrl: '',
      Img: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.baseUrl = window.location.origin + '/api/'
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 分页
    handleCurrentChange(val) {
      this.pagination.current = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getList();
    },
    submitForm() {
      this.getList();
    },
    formCancel() {
      this.$refs['searchForm'].resetFields();
      this.searchForm = {};
    },
    detailBanner(id) {
      const obj = {
        id: id
      }
      bannerDatail(obj).then(res => {
        if (res.success === true && res.data) {
          console.log(res.data)
          console.log(this.Img)
          this.dialogVisible = true
          this.Img = res.data
          this.ImageUrl = res.data.subjectLink
        }
      })
    },
    // 审核
    auditBanner(flag, item) {
      if (flag === 2) {
        bannerAudit({ status: flag, id: item.id }).then(res => {
          console.log(11111, res);
          if (res.code === 200) {
            this.$message.success('内容审核通过');
            this.getList();
          }
        });
      } else {
        bannerAudit({ status: flag, id: item.id }).then(res => {
          console.log(11111, res);
          if (res.code === 200) {
            this.$message.success('内容驳回成功');
            this.getList();
          }
        });
      }
    },
    // 发布
    publishBanner(item) {
      const unIsDisplay = item.isDisplay === 0 ? 1 : 0
      console.log(unIsDisplay)
      isBannerShow({ id: item.id, isDisplay: unIsDisplay }).then(res => {
        if (res.code === 200) {
          this.$message.success('专题展示状态改变成功');
          this.getList();
        }
      });
    },
    editBanner(item) {
      store.commit('banner/setBannerInfo', item);
      this.$router.push('/bannerRelease');
    },
    // 删除
    deleteBanner(item) {
      this.$confirm('确定删除当前专题?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        bannerDelete({ ids: item.id }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList();
          }
        })
      })
    },
    getList() {
      const requestBody = {
        ...this.searchForm,
        current: this.pagination.current,
        size: this.pagination.pageSize
      }
      bannerListPaging(requestBody).then(res => {
        if (res.code === 200) {
          this.bannerData = res.data.records;
          console.log(this.bannerData)
          this.pagination.total = res.data.total;
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.table-component-page{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header-box{
    width: 100%;
    background-color: #fff;
    padding: 10px 15px;
    ::v-deep .el-form-item{
      margin-right: 30px;
      .el-form-item__label{
        font-family: "Microsoft YaHei";
        color: #333
      }
    }
  }
  .table-container{
    width: 100%;
    flex: 1;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    .table-box {
      width: 100%;
      flex-grow: 1;
      overflow: hidden;
      overflow-y: auto;
    }
    .table-pagination{
      height: 60px;
      width: 100%;
      text-align: right;
      background-color: #fff;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      ::v-deep .el-pagination{
        span, button, ul>li{
          height: 50px;
          line-height: 50px;
          font-size: 16px;
        }
      }
    }
  }
}

</style>
